import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_module/app/app.dart';
import 'package:flutter_module/base/base.dart';
import 'package:flutter_module/channel/channel_method.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';

class Login extends BaseStateWidget {
  const Login({super.key});

  @override
  LoginState buildState() => LoginState();
}

class LoginState extends BaseState<Login> {
  // 用户名
  var nameController = TextEditingController(text: "");

  // 密码
  var pwdController = TextEditingController(text: "");

  // 是否同意隐私
  var isSelectPrivacy = false;

  @override
  Widget setContent(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          // back
          GestureDetector(
            onTap: () {
              context.watch<RoutePageState>().back();
            },
            child: Container(
              padding: EdgeInsets.all(24.w),
              child: SvgPicture.asset("res/svg/svg_back.svg", width: 48.w, height: 48.w),
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 32.w, right: 32.w),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  SizedBox(height: 32.w),
                  // logo
                  SvgPicture.asset("res/svg/svg_flutter.svg", width: 96.w, height: 96.w),
                  SizedBox(height: 32.w),
                  // title
                  Text(
                    "您好, 欢迎登录",
                    style: TextStyle(fontSize: 42.w, color: Colors.white),
                  ),
                  SizedBox(height: 64.w),
                  // username
                  Container(
                    height: 96.w,
                    width: 686.w,
                    alignment: Alignment.centerLeft,
                    padding: EdgeInsets.only(left: 32.w, right: 32.w),
                    decoration: BoxDecoration(
                      border: BoxBorder.all(color: Colors.white60, width: 1.w),
                      borderRadius: BorderRadius.circular(8.w),
                    ),
                    child: EditableText(
                      controller: nameController,
                      keyboardType: TextInputType.emailAddress,
                      style: TextStyle(fontSize: 28.w, color: Colors.white),
                      focusNode: FocusNode(),
                      cursorColor: Colors.blueAccent,
                      backgroundCursorColor: Colors.blueAccent,
                      // decoration: InputDecoration(
                      //   border: InputBorder.none,
                      //   counterText: "",
                      //   hintText: "请输入登录邮箱",
                      //   hintStyle: TextStyle(fontSize: 28.w, color: Colors.white12),
                      // ),
                    ),
                  ),
                  SizedBox(height: 8.w),
                  // password
                  Container(
                    height: 96.w,
                    width: 686.w,
                    alignment: Alignment.centerLeft,
                    padding: EdgeInsets.only(left: 32.w, right: 32.w),
                    decoration: BoxDecoration(
                      border: BoxBorder.all(color: Colors.white60, width: 1.w),
                      borderRadius: BorderRadius.circular(8.w),
                    ),
                    child: EditableText(
                      focusNode: FocusNode(),
                      controller: pwdController,
                      keyboardType: TextInputType.text,
                      onChanged: (txt) {
                        print(txt);
                      },
                      cursorColor: Colors.blueAccent,
                      backgroundCursorColor: Colors.blueAccent,
                      style: TextStyle(fontSize: 28.w, color: Colors.white),
                      // decoration: InputDecoration(
                      //   border: InputBorder.none,
                      //   counterText: "",
                      //   hintText: "请输入密码",
                      //   hintStyle: TextStyle(fontSize: 28.w, color: Colors.white12),
                      // ),
                    ),
                  ),
                  SizedBox(height: 32.w),
                  // forget password
                  GestureDetector(
                    onTap: () {
                      channel.invokeMethod("toast", "忘记密码");
                    },
                    child: Text(
                      "忘记密码",
                      style: TextStyle(fontSize: 24.w, color: Colors.blue),
                    ),
                  ),
                  SizedBox(height: 32.w),
                  // privacy
                  Row(
                    children: [
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            isSelectPrivacy = !isSelectPrivacy;
                          });
                        },
                        child: SvgPicture.asset(
                          isSelectPrivacy ? "res/svg/svg_checkbox_selected.svg" : "res/svg/svg_checkbox_normal.svg",
                          width: 40.w,
                          height: 40.w,
                        ),
                      ),
                      SizedBox(width: 8.w),
                      RichText(
                        text: TextSpan(
                          children: [
                            TextSpan(text: "已阅读并同意"),
                            TextSpan(
                              text: "服务协议",
                              style: TextStyle(color: Colors.blue),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  channel.invokeMethod("toast", "服务协议");
                                },
                            ),
                            TextSpan(text: "和"),
                            TextSpan(
                              text: "隐私政策",
                              style: TextStyle(color: Colors.blue),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  channel.invokeMethod("toast", "隐私政策");
                                },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 32.w),
                  // login
                  GestureDetector(
                    onTap: () {
                      channel.invokeMethod("toast", "登录: ${nameController.text} ${pwdController.text}");
                    },
                    child: Container(
                      height: 96.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(48.w),
                        gradient: LinearGradient(begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [Colors.white12, Colors.white54]),
                      ),
                      child: Text(
                        "登录",
                        style: TextStyle(fontSize: 32.w, color: Colors.white),
                      ),
                    ),
                  ),
                  SizedBox(height: 32.w),
                  // register
                  RichText(
                    textAlign: TextAlign.center,
                    text: TextSpan(
                      children: [
                        TextSpan(text: "还没有账号？"),
                        TextSpan(
                          text: "立即注册",
                          style: TextStyle(color: Colors.blue),
                          recognizer: TapGestureRecognizer()
                            ..onTap = () {
                              channel.invokeMethod("toast", "立即注册");
                            },
                        ),
                      ],
                    ),
                  ),
                  Expanded(child: Container()),
                  // customer service
                  RichText(
                    textAlign: TextAlign.center,
                    text: TextSpan(
                      children: [
                        TextSpan(text: "登录有问题？"),
                        TextSpan(
                          text: "联系客服",
                          style: TextStyle(color: Colors.blue),
                          recognizer: TapGestureRecognizer()
                            ..onTap = () {
                              channel.invokeMethod("toast", "联系客服");
                            },
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 64.w),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
